<template>
  <a-card>
    <!-- 搜索栏 -->
    <search-form :loading="loading" @search="toQuery" :downloadLoading="downloadLoading" @download="toExport" v-slot="{}">
      <a-row :gutter="16">
        <a-col :span="8">
          <a-form-item label="名称" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
            <a-input v-decorator="['PQ_name_LIKE']" placeholder="请输入名称" />
          </a-form-item>
        </a-col>
      </a-row>
    </search-form>
    <!-- table操作 -->
    <div class="table-operations">
      <a-button v-permission="{ meta: $route.meta, permissionCode: 'ADD' }" type="primary" @click="onAdd">新建</a-button>
    </div>
    <!-- table -->
    <a-table bordered size="middle" :loading="loading" :columns="columns" :rowKey="(record) => record.id" :dataSource="data" @change="handleTableChange" :pagination="pagination">
      <!-- <template v-slot:dbStatus="dbStatus"> {{ dict.label['COMMON.TASK_STATUS']['' + dbStatus] }}</template> -->
      <!-- table-row-operatiin -->
      <template v-slot:operation="record">
        <div class="table-row-operations">
          <a v-permission="{ meta: $route.meta, permissionCode: 'UPDATE' }" href="javascript:;" @click="onEnable(record)"> 开启 </a>
          <a v-permission="{ meta: $route.meta, permissionCode: 'UPDATE' }" href="javascript:;" @click="onDisable(record)"> 挂起 </a>
          <a v-permission="{ meta: $route.meta, permissionCode: 'UPDATE' }" href="javascript:;" @click="onEdit(record)">修改 </a>
          <a-popconfirm v-permission="{ meta: $route.meta, permissionCode: 'DELETE' }" title="Sure to delete?" @confirm="() => onDelete(record)">
            <a href="javascript:;">删除</a>
          </a-popconfirm>
        </div>
      </template>
    </a-table>
    <!-- form 编辑 查看 -->
    <task-form ref="form" :is-add="isAdd" :dict="dict" @refreshTable="init" />
  </a-card>
</template>

<script>
const columns = [
  {
    title: '名称',
    dataIndex: 'name'
  },
  {
    title: 'Job Group',
    dataIndex: 'jobGroup'
  },
  {
    title: 'Job Name',
    dataIndex: 'jobName'
  },
  {
    title: 'cron',
    dataIndex: 'cron'
  },
  {
    title: 'Disallow Concurrent Exec',
    dataIndex: 'disallowConcurrentExecutionLabel'
  },
  {
    title: 'Class',
    dataIndex: 'clazz'
  },
  {
    title: 'Method',
    dataIndex: 'method'
  },
  {
    title: '数据库状态',
    dataIndex: 'dbStatusLabel'
    // scopedSlots: { customRender: 'dbStatus' }
  },
  {
    title: '内存状态',
    dataIndex: 'memoryStatus'
  },
  {
    title: '操作',
    key: 'operation',
    scopedSlots: { customRender: 'operation' }
  }
]

import initData from '@/mixins/initData'
import permission from '@/directive/permission' // 权限判断指令
import SearchForm from '@/components/tool/SearchForm'
import TaskForm from './form'
import { get, del, edit } from '@/api/task'

export default {
  name: 'Task',
  components: {
    SearchForm,
    TaskForm
  },
  directives: { permission },
  mixins: [initData],
  dicts: ['COMMON.TASK_STATUS'],
  data() {
    return {
      columns
    }
  },
  created() {
    this.$nextTick(() => {
      this.init()
    })
  },
  computed: {},
  methods: {
    beforeInit() {
      // ajax query
      this.url = 'oauth/task/page'
      this.params = { current: this.pagination.current, size: this.pagination.pageSize, sort: this.sort, ...this.query }
      return true
    },
    dataProcessor(data) {
      data.forEach((d) => {
        d['dbStatusLabel'] = this.dict.label['COMMON.TASK_STATUS']['' + d['dbStatus']]
        d['disallowConcurrentExecutionLabel'] = d['disallowConcurrentExecution'] === 1 ? 'true' : 'false'
      })
      return data
    },
    onAdd() {
      this.isAdd = true
      const _this = this.$refs['form']
      _this.visible = true
    },
    async onEdit(record) {
      let res = await get(record.id)
      this.isAdd = false
      const _this = this.$refs['form']
      _this.form = { ...res.data }
      _this.visible = true
    },
    async onEnable(record) {
      const key = 'enableTask'
      try {
        this.$message.loading({ content: '正在开启...', key })
        record.dbStatus = 1
        let res = await edit(record)
        this.$message.success({ content: '修改成功!', key, duration: 2 })
        this.init()
      } catch (err) {
        console.error(err.message)
      }
    },
    async onDisable(record) {
      const key = 'disableTask'
      try {
        this.$message.loading({ content: '正在挂起...', key })
        record.dbStatus = 0
        let res = await edit(record)
        this.$message.success({ content: '修改成功!', key, duration: 2 })
        this.init()
      } catch (err) {
        console.error(err.message)
      }
    },
    async onDelete(record) {
      const key = 'delTask'
      try {
        this.$message.loading({ content: '正在删除...', key })
        let res = await del(record.id)
        this.$message.success({ content: '删除成功!', key, duration: 2 })
        this.init()
      } catch (err) {
        this.$message.loading({ content: '正在删除...', key })
        console.error(err.message)
      }
    }
  }
}
</script>
